<template>
    <section>
      <h1>{{ experience.name }}</h1>
      <img :src="`/images/${experience.image}`" :alt="experience.name">
      <p>{{ experience.description }}</p>
    </section>
  </template>
  
  <script>
  import sourceData from '@/data.json'
  
  export default {
    props: {
      id: {
        type: Number,
        required: true
      },
      experienceSlug: {
        type: String,
        required: true
      }
    },
    computed: {
      destination() {
        return sourceData.destinations.find(des=> des.id === this.id)
      },
      experience() {
        return this.destination.experiences.find(exp=> exp.slug === this.experienceSlug)
      }
    }
  }
  </script>